import {  useEffect, useState } from "react";

export default function UsEffectDemo(){
    let [count, setCount] = useState(0);
    let [width, setWidth] = useState(document.body.clientWidth);

    //屏幕窗口变化变更变量值
    var onChange = ()=>{
        setWidth(document.body.clientWidth);
    }

    //仅调用一次，相当于 componentDidMount 和 componentWillUnmount
    //仅加载和卸载的时候分别执行一次
    // 挂载的时候绑定事件，卸载的时候解绑事件
    useEffect(()=>{
        console.log("add resize event");
        window.addEventListener("resize", onChange, false);
        console.log("绑定");
        return ()=>{
            console.log("解除绑定");
            window.removeEventListener("resize", onChange, false);
        }
    },[]);

    useEffect(()=>{
        document.title = count;
    });

    //标题变化会触发这个effect，类似于 componentDidUpdate
    useEffect(()=>{
        console.log(`count change: count is ${count}.`);
    },[count]);

    return (
        <div>
            页面名称： {count};<br/>
            页面宽度： {width}<br/>
            <button onClick={(e)=>setCount(count+1)}>点击</button>
        </div>
    )
}